<script setup lang="ts">
import useInitScrollHeight from '@/common/use-init-scroll-height'
import Scroll from '@/components/scroll/index.vue'
import usePaddingBottom from '@/common/use-padding-bottom'
import { usePlayerStore } from '@/stores/playerStore'
import { px2vmin } from '@/utils'
import defaultImg from '@/assets/images/default.png'
const playerStore = usePlayerStore()
const router = useRouter()
const { paddingBottomStyle } = usePaddingBottom()
const { scrollHeight } = useInitScrollHeight(['van-tabbar', 'van-search'])
const name = ref<string>('')
const pic = ref<string>('')
const songList = ref<ISongItem[]>([])
function rankingClick(item: ITopItem) {
  name.value = item.name
  pic.value = item.coverImgUrl
  songList.value = item.songs
  router.push(`/top-list/${item.id}`)
}
function getSingers(arList: { id: number; name: string; alias: string[] }[]) {
  return arList.map(({ name }) => name).join('/')
}
function swiperClickHandle(item: ITopItem, songs: ISongItem[]) {
  if (item.isPlaying) {
    rankingClick(item)
  } else {
    playerStore.topList.forEach((value) => {
      value.isPlaying = false
    })
    item.isPlaying = true
    const index = Math.floor(Math.random() * songs.length)
    playerStore.playMusic(songs[index], songs)
    playerStore.fullScreen = false
  }
}
</script>

<template>
  <div :style="{ height: px2vmin(scrollHeight) }" class="top-list" @click.stop>
    <scroll class="scroll" :probe-type="0" :height="scrollHeight" :bounce="false">
      <ul :style="paddingBottomStyle">
        <template v-if="playerStore.topList.length > 0">
          <li
            v-for="item in playerStore.topList"
            :key="item.id"
            class="group"
            @click.stop="rankingClick(item)"
          >
            <header class="header">
              <h3 class="title">{{ item.name }}</h3>
              <span class="update">{{ item.updateFrequency }}</span>
            </header>
            <div class="container">
              <div class="swiper-content" @click.stop>
                <div
                  v-for="(innerItem, idx) in item.songs.slice(0, 1)"
                  :key="innerItem.id"
                  class="bgc-box"
                  :style="{
                    width: '60px',
                    height: '60px',
                    backgroundImage: `url(${innerItem.al.picUrl})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    borderRadius: px2vmin(10),
                    overflow: 'hidden'
                  }"
                  @click="swiperClickHandle(item, item.songs)"
                >
                  <span
                    v-if="idx === 0"
                    :class="`iconfont2 icon ${
                      item.isPlaying ? 'icon-yinlemoshi' : 'icon-24gf-play'
                    }`"
                    style="color: #ffffff"
                  />
                </div>
              </div>
              <ul class="songs-wrapper">
                <li v-for="(item2, index) in item.songs.slice(0, 3)" :key="item2.id" class="item">
                  <span class="name">{{ index + 1 }} {{ item2.name }}</span>
                  <span class="separator">-</span>
                  <span class="singer">{{ getSingers(item2.ar) }}</span>
                </li>
              </ul>
            </div>
          </li>
        </template>
        <template v-else>
          <van-skeleton>
            <template #template>
              <ul style="width: 100%">
                <li v-for="item in 10" :key="item" class="group">
                  <header class="header" :style="{ background: '#666', height: px2vmin(14) }">
                    <h3 class="title" />
                    <span class="update" />
                  </header>
                  <div class="container">
                    <div class="swiper-content" @click.stop>
                      <div
                        v-for="(innerItem, idx) in 1"
                        :key="innerItem"
                        class="bgc-box"
                        :style="{
                          width: '60px',
                          height: '60px',
                          backgroundImage: `url(${defaultImg})`,
                          backgroundSize: 'cover',
                          backgroundPosition: 'center',
                          borderRadius: px2vmin(10),
                          overflow: 'hidden'
                        }"
                      >
                        <span v-if="idx === 0" style="color: #ffffff" />
                      </div>
                    </div>
                    <ul class="songs-wrapper">
                      <li
                        v-for="item2 in 3"
                        :key="item2"
                        :style="{ background: '#666', height: px2vmin(14) }"
                      />
                    </ul>
                  </div>
                </li>
              </ul>
            </template>
          </van-skeleton>
        </template>
      </ul>
    </scroll>
    <router-view v-slot="{ Component }">
      <transition name="slide">
        <component :is="Component" :title="name" :pic="pic" />
      </transition>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
.top-list {
  position: relative;
  overflow: hidden;
  .scroll {
    > ul {
      padding: 10px;
    }
    .group {
      box-sizing: border-box;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 20px;
      background-color: $color-highlight-background;
      .header {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .title {
          font-size: $font-size-medium-x;
        }
        .update {
          font-size: $font-size-small-s;
          color: $color-text-d;
        }
      }
      .container {
        display: flex;
      }
      .swiper-content {
        margin-right: 10px;
        .bgc-box {
          position: relative;
          .icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
          }
        }
      }

      .songs-wrapper {
        padding: 0 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        .item {
          line-height: 20px;
          color: $color-text;
          @include no-wrap;
          font-size: $font-size-small;
          .name {
          }
          .separator {
            margin: 0 5px;
          }
          .singer {
            color: $color-text-l;
          }
        }
      }
    }
  }
}
</style>
